<template>
	<view class="container">
		<view class="tabs">
			<view class="tabs_item" @click="handleItem(index)" v-for="(item,index) in tabs" :key="item.id" :class="item.isActive?'isActive':''">
				{{item.value}}
			</view>
		</view>
		<!-- 搜索框 -->
		<search></search>
		<view class="content">
			<view class="tabs1" v-if="tabs[0].isActive">
				<!-- 任务列表 -->
				<view class="list_item">
					<view class="item_left">
						<view class="item_name">
							测试用例，请勿点击
						</view>
						<view class="item_precent">
							<span>10名</span>
							<progress percent="20" show-info stroke-width="3"/>
						</view>
					</view>
					<view class="item_right">
						<view class="item_num">
							<span>1</span>积分
						</view>
						<view class="item_time">
							2021-19-34 34:45:45截止
						</view>
					</view>
				</view>		
				<view class="list_item">
					<view class="item_left">
						<view class="item_name">
							测试用例，请勿点击
						</view>
						<view class="item_precent">
							<span>10名</span>
							<progress percent="20" show-info stroke-width="3"/>
						</view>
					</view>
					<view class="item_right">
						<view class="item_num">
							<span>1</span>积分
						</view>
						<view class="item_time">
							2021-19-34 34:45:45截止
						</view>
					</view>
				</view>	
				<view class="message">
					已无更多内容
				</view>
			</view>
			<view class="tabs1" v-if="tabs[1].isActive">
				<!-- 任务列表 -->
				<view class="list_item">
					<view class="item_left">
						<view class="item_name">
							测试用例，请勿点击
						</view>
						<view class="item_precent">
							<span>10名</span>
							<progress percent="20" show-info stroke-width="3"/>
						</view>
					</view>
					<view class="item_right">
						<view class="item_num">
							<span>1</span>积分
						</view>
						<view class="item_time">
							2021-19-34 34:45:45截止
						</view>
					</view>
				</view>
				<view class="message">
					已无更多内容
				</view>
			</view>
			<view class="tabs1" v-if="tabs[2].isActive">
				<view class="list_item">
					<view class="item_left">
						<view class="item_name">
							测试用例，请勿点击
						</view>
						<view class="item_precent">
							<span>10名</span>
							<progress percent="20" show-info stroke-width="3"/>
						</view>
					</view>
					<view class="item_right">
						<view class="item_num">
							<span>1</span>积分
						</view>
						<view class="item_time">
							2021-19-34 34:45:45截止
						</view>
					</view>
				</view>	
				<view class="message">
					已无更多内容
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Search from '../search/search.vue'
	export default {
		components:{
			search:Search
		},
		data() {
			return {
				tabs:[
					{
						id:0,
						value:'快手',
						isActive:true
					},
					{
						id:1,
						value:'抖音',
						isActive:false
					},
					{
						id:2,
						value:'小红书',
						isActive:false
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			handleItem(index){
				this.tabs.forEach(item=>{
					return item.id==index?item.isActive=true:item.isActive=false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.tabs{
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			display: flex;
			.tabs_item{
				width: 33.33%;
				line-height: 70rpx;
				text-align: center;
			}
			.isActive{
				border-bottom: 2px solid #4CD964;
				color:#4CD964;
			}
		}
		.content{
			margin-top: 150rpx;
			.list_item{
				font-size: 32rpx;
				display: flex;
				padding: 16rpx 10rpx;
				border-bottom: 1px solid #ccc;
				.item_left{
					flex: 3;
					.item_name{}
					.item_precent{
						display: flex;
						margin-top: 12rpx;
						progress{
							width: 70%;
							margin-left: 5rpx;
						}
					}
				}
				.item_right{	
					flex: 3;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.item_num{
						span{
							font-size: 34rpx;
							color: #4CD964;
						}
					}
					.item_time{
						margin-top: 12rpx;
					}
				}
			}
			.message{
				line-height:80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #ccc;
			}
		}
	}
</style>
